<template>
    <h2>房型管理显示</h2>
    <table>
        <tbody>
            <tr>
                <td>
                    <input type="text" v-model="form.name">
                    <input type="button" class="btn btn-primary" @click="getroomTypeShow" value="查询">
                    <input type="button" class="btn btn-primary" @click="Add" value="添加">
                </td>
            </tr>
        </tbody>
    </table>
    <table class="table table-bordered">
        <tbody>
            <tr class="bg-primary">
                <td>房间类型</td>
                <td>图片</td>
                <td>面积</td>
                <td>是否有窗</td>
                <td>价格</td>
                <td>入住人数</td>
                <td>状态</td>
                <td>时间</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in roomTypeShow">
                <td>{{ item.name }}</td>
                <td><img :src="item.pic" style="display: '';max-width: 100px;max-height: 100px;"></td>
                <td>{{ item.cm }}</td>
                <td>{{ item.isyes ? "有" : "无" }}</td>
                <td style="color:red;">￥{{ item.price }}</td>
                <td>{{ item.ruzhu }}</td>
                <td style="color: green;">{{ item.zhuangTai ? "启用" : "禁用" }}</td>
                <td>{{ item.time.substring(0, 10) }}</td>
                <td>
                    <a @click="Delete(item.id)" style="color: red;">删除</a>
                    <a @click="Update(item.id)" style="color: blue;">修改</a>
                </td>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <td>
                    <input type="button" class="btn btn-primary" @click="show" value="上一页">
                    <input type="button" class="btn btn-primary" @click="show" value="下一页">
                    <input type="button" class="btn btn-primary" @click="show" value="首页">
                    <input type="button" class="btn btn-primary" @click="show" value="尾页">
                    共{{ 7 }}条,每页{{ 4 }},共{{ 3 }}/{{ 2 }}页,{{ 3 }}条/页
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
//引入组件
import { ref, reactive, onMounted } from "vue"
//bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css"
//访问后端
import axios from "axios"
//路由(1)
import { useRouter } from "vue-router";

const router = useRouter();

const roomTypeShow = ref([])
const form = reactive({
    start: {
        name: "",
        Index: "1",
        sum: "3",
    },
    list: [],
    Count: 7,
    Size: 4,

})
const getroomTypeShow = () => {

    axios.get("http://localhost:5256/api/RoomType/GetShow").then(res => {
        roomTypeShow.value = res.data;
    })
}
//分页
const show = () => {
    alert("已是第一页");
}
const Delete = (id: number) => {
    if (confirm("确认删除吗？？")) {
        axios.delete("http://localhost:5256/api/RoomType/Delete?id=" + id).then(res => {
            if (res.data > 0) {
                alert("删除成功！！");
                getroomTypeShow();
            }
            else {
                alert("删除失败！！");
            }
        })
    }
}
//修改
const Update = (id: number) => {
    router.push("/roomTypeUpdate?id=" + id);
}
//添加
const Add = () => {
    router.push("/roomTypeAdd");
}
//钩子函数
onMounted(() => {
    getroomTypeShow();
})
</script>